<template>

  <p class="app">

    <el-header>

      <el-menu :default-active="$route.path" @select="handleSelect" router class="el-menu-demo" mode="horizontal"  background-color="#7abefd"

  text-color="#fff"

  active-text-color="#ffd04b">
        <img  src="../assets/home/logo.png" alt="">
        <el-menu-item index="/home">首页</el-menu-item>

        <el-menu-item index="/news">新闻</el-menu-item>

        <el-menu-item index="/adopt">领养</el-menu-item>
        <el-menu-item index="/foter">寄养</el-menu-item>

        <el-menu-item index="/about">关于我们</el-menu-item>
        <li class="login" @click="go">
            <p>登录</p>
            <span></span>
            <p>注册</p>
        </li>
      </el-menu>

      <p class="line"></p>

    </el-header>

    <el-main>

      <router-view></router-view>

    </el-main>

  </p>

</template>

<script>

  export default {

    data() {

      return {

        activeIndex: "1"

      }
    },
    methods:{
    handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      },
   go(){
     this.$router.push('/')
   }
       
    }

  };

</script>
<style lang="less" scoped>
    .el-header{
        padding: 0px;
        img{
            float: left;
            margin: 0px 60px;
        }
        
        li{
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            line-height: 60px;
            flex-direction: row-reverse;
            margin-right: 30px;
            user-select:none;
            p{
                color: #fff;
                font-size: 13px;
            }
             span {
                display: inline-block;
                width: 3px;
                height: 16px;
                margin: 0px 10px;
                background-color: #ccc;
            }
        }
    }

        .el-menu.el-menu--horizontal{
        
          padding: 0px 100px;
      }

    .el-main{
      padding-bottom: 0px;
    }
    
    .login{
      display: flex;
      flex-wrap: nowrap;
      margin-left: auto;
      width: 80px;
    }
  
</style>